<template>
	<s-layout class="wallet-wrap" title="账户余额">
		<!-- 钱包卡片 -->
		<view class="header-box ss-flex ss-row-center ss-col-center">
			<view class="card-box" :style="{backgroundImage:'url('+sheep.$url.static('static/board_bg.png')+')'}">
				<view class="card-head ss-flex ss-col-center">
					<view class="card-title ss-m-r-10">账户可用</view>
				</view>
				<view class="ss-m-t-44">
					<view class="money-num">￥{{ userInfo.money ? userInfo.money : '0.00' }}</view>
				</view>
				<view class="ss-m-t-34 ss-flex ss-col-center" style="justify-content: space-between;">
					<view class="remark">可提现余额（元）</view>
					<view class="card-btn ss-flex">
					<!-- #ifdef H5 -->
					<view class="box btn_1"  @tap="sheep.$router.go('/pages/user/wallet/transfer')">赠送</view>
					<!-- #endif -->
						<view class="box btn_2" @tap="sheep.$router.go('/pages/pay/withdraw')">去提现 ></view>
					</view>
				</view>
			</view>
		</view>
		<button class="add-btn ss-reset-button" @tap="sheep.$router.go('/pages/pay/recharge')">
			充值
			<!-- @tap="state.showModal = true" -->
		</button>
		<button class="grey-btn ss-reset-button" @tap="sheep.$router.go('/pages/user/wallet/details')">
			收支明细
		</button>
		<view class="mes ss-m-t-44">
			<image class="im" :src="sheep.$url.static('/static/mes.png')" mode=""></image>
		</view>
		<view class="ss-p-30 color">
			<!-- <mp-html class="richtext" :content="state.content"></mp-html> -->
			1、账户余额：允许在商城消费、提现至已绑定的银行卡
			2、待结算货款：用户在商城出货后，获取的佣金，无法直接使用，需要通过货款账户进货，才能转换为可使用余额
			3、累计提现总金额：用户发起提现申请且审核通过后的金额
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import _ from 'lodash';

	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');

	const pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
		expense: 0,
		income: 0,
	};
	// 数据
	const state = reactive({
		showModal: false,
		date: [],
		currentTab: 0,
		pagination,
		loadStatus: '',
		today: '',
		recharge_money: ''
	});

	const tabMaps = [{
			name: '全部',
			value: 'all',
		},
		{
			name: '收入',
			value: 'income',
		},
		{
			name: '支出',
			value: 'expense',
		},
	];
	const userInfo = computed(() => sheep.$store('user').userInfo);

	const dateFilterText = computed(() => {
		if (state.date[0] === state.date[1]) {
			return state.date[0];
		} else {
			return state.date.join('~');
		}
	});

	async function getLogList(page = 1, list_rows = 8) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.user.wallet.log({
			type: 'money',
			tab: tabMaps[state.currentTab].value,
			list_rows,
			page,
			date: appendTimeHMS(state.date),
		});
		if (res.code === 1) {
			let list = _.concat(state.pagination.data, res.data.list.data);
			state.pagination = {
				...res.data.list,
				data: list,
				income: res.data.income,
				expense: res.data.expense,
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	onLoad(async (options) => {
		state.today = dayjs().format('YYYY-MM-DD');
		state.date = [state.today, state.today];
		getLogList();
	});
	async function onConfirm() {
		const {
			code,
			data
		} = await sheep.$api.trade.rechargePayment({
			recharge_money: state.recharge_money,
		});
		if (code === 1) {
			// #ifdef MP
			sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
			// #endif
			sheep.$router.go('/pages/pay/index', {
				orderSN: data.order_sn,
				type: 'recharge',
			});
		}
	}

	function onChange(e) {
		state.pagination = pagination;
		state.currentTab = e.index;
		getLogList();
	}

	function onChangeTime(e) {
		state.date[0] = e[0];
		state.date[1] = e[e.length - 1];
		state.pagination = pagination;
		getLogList();
	}

	function appendTimeHMS(arr) {
		return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
	}

	onReachBottom(() => {
		if (state.loadStatus !== 'noMore') {
			getLogList(state.pagination.current_page + 1);
		}
	});
</script>

<style lang="scss" scoped>
	.add-btn {
		margin: 30rpx;
		flex: 1;
		background: #252525;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: $white;
		position: relative;
		z-index: 1;
	}

	.grey-btn {
		margin: 30rpx;
		flex: 1;
		box-shadow: 0 0 0 1px #2CB9A4;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: #2CB9A4;
		position: relative;
		z-index: 1;
	}

	.mes {
		margin: 30rpx;
		margin-bottom: 0;
		height: 46rpx;
		width: 92%;

		.im {
			height: 46rpx;
			width: 100%;
		}
	}

	.color {
		color: #979797;
		line-height: 50rpx;
	}

	.header-box {
		padding: 30rpx;

		.card-box {
			width: 100%;
			min-height: 300rpx;
			padding: 40rpx;
			background-size: 100% 100%;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;
			box-sizing: border-box;

			.card-btn {
				text-align: center;
				font-size: 24rpx;
				position: absolute;
				right: 0;

				.box {
					background: #fff;
				}

				.btn_1 {
					color: #2CB9A4;
					border-radius: 30rpx;
					padding: 10rpx 30rpx;
					margin-right: 20rpx;
				}

				.btn_2 {
					color: #E84010;
					padding: 10rpx 20rpx;
					border-radius: 30rpx 0 0 30rpx;
				}
			}

			.remark {
				color: #fff;
				font-size: 26rpx;
			}

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				z-index: 2;
				position: absolute;
				top: 0;
				left: 0;
				background: v-bind(headerBg) no-repeat;
				pointer-events: none;
			}

			.card-head {
				color: $white;
				font-size: 30rpx;
			}

			.money-num {
				font-size: 60rpx;
				line-height: 60rpx;
				font-weight: 500;
				color: $white;
				font-family: OPPOSANS;
			}
		}
	}
</style>